import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import "../../CMDSender.js" as Controler

Item {
    id:root
    width: parent.width
    height:parent.height

    opacity: 0
    Component.onCompleted: {
        opacity=1;
    }
    Behavior on opacity {
        PropertyAnimation{
            properties: "opacity"
            duration: 500
        }
    }

    //fan model
    ListModel{
        id:fanStateModel
    }

    ListView{
        anchors.fill: parent
        model: fanStateModel
        delegate: Item{
            width: parent.width
            height: 0
//            opacity: 0

            clip:true
            Component.onCompleted: {
                height=100*Device.dentisty
//                opacity=1;
            }
            Behavior on height{
                PropertyAnimation{
                    property:"height"
                    duration: 300
                    easing.type: Easing.OutQuint
                }
            }
//            Behavior on opacity{
//                PropertyAnimation{
//                    property:"opacity"
//                    duration: 200
//                    easing.type: Easing.OutQuint
//                }
//            }

            //title
            Text{
                anchors.horizontalCenter: parent.horizontalCenter
                y:10*Device.dentisty
                text:name
                font.pointSize: 20
                color:"#fafafa"
                Rectangle{
                    anchors.centerIn: parent
                    color:"#00000000"
                    width: parent.width+20*Device.dentisty
                    height:parent.height+10*Device.dentisty
                    border.width: 1*Device.dentisty
                    border.color: "#33000000"
                }
            }

            //animated Fan
            Image{
                id:fanPad
                source:"qrc:/imgs/control/smartHomeIcons/control/fan_pad.png"
                width: 70*Device.dentisty
                height: width
                anchors.verticalCenter: parent.verticalCenter
                x:10*Device.dentisty
                Image {
                    id: fanleave
                    source: "qrc:/imgs/control/smartHomeIcons/control/fan_leave.png"
                    width: parent.width
                    height:width
                    RotationAnimator {
                        id:fanAnimator
                        target: fanleave;
                        from: 0;
                        to: 360;
                        loops: Animation.Infinite
                        duration: (4-level)*300
                        running: powerOn
                    }
                }
            }

            //group fan level selector
            Row{
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 10*Device.dentisty
                spacing: 5*Device.dentisty
                Image {
                    id: level1
                    source: powerOn&&level===1?"qrc:/imgs/control/smartHomeIcons/control/fan_level_on.png":
                                                "qrc:/imgs/control/smartHomeIcons/control/fan_level_off.png"
                    width: 40*Device.dentisty
                    height: 40*Device.dentisty

                    Text{
                        text:"1"
                        anchors.centerIn: parent
                        color:"#ffffff"
                        font.pointSize: 25
                    }

//                    ceiling_fan_01_speed_01#!
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            fanStateModel.setProperty(index,"level",1);
                            if(powerOn){
                                fanAnimator.stop();
                                fanAnimator.start();
                                if(TcpSocket.tcpState==="connected")
                                    TcpSocket.sendData(tname+"_speed_01#!");
                                else
                                    Controler.send(tname+"_speed_01");
                            }
                        }
                    }
                }

                Image {
                    id: level2
                    source: powerOn&&level===2?"qrc:/imgs/control/smartHomeIcons/control/fan_level_on.png":
                                                "qrc:/imgs/control/smartHomeIcons/control/fan_level_off.png"
                    width: 40*Device.dentisty
                    height: 40*Device.dentisty

                    Text{
                        text:"2"
                        anchors.centerIn: parent
                        color:"#ffffff"
                        font.pointSize: 35
                    }
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            fanStateModel.setProperty(index,"level",2);
                            if(powerOn){
                                fanAnimator.stop();
                                fanAnimator.start();
                                if(TcpSocket.tcpState==="connected")
                                    TcpSocket.sendData(tname+"_speed_02#!");
                                else
                                    Controler.send(tname+"_speed_02");
                            }
                        }
                    }
                }

                Image {
                    id: level3
                    source: powerOn&&level===3?"qrc:/imgs/control/smartHomeIcons/control/fan_level_on.png":
                                                "qrc:/imgs/control/smartHomeIcons/control/fan_level_off.png"
                    width: 40*Device.dentisty
                    height: 40*Device.dentisty

                    Text{
                        text:"3"
                        anchors.centerIn: parent
                        color:"#ffffff"
                        font.pointSize: 35
                    }

                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            fanStateModel.setProperty(index,"level",3);
                            if(powerOn){
                                fanAnimator.stop();
                                fanAnimator.start();
                                if(TcpSocket.tcpState==="connected")
                                    TcpSocket.sendData(tname+"_speed_03#!");
                                else
                                    Controler.send(tname+"_speed_03");
                            }
                        }
                    }
                }
            }


            //power switcher
            //switcher
            Switch{
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                anchors.rightMargin: 10*Device.dentisty
                checked: powerOn
                onCheckedChanged:{
                    if(checked){
                        fanStateModel.setProperty(index,"powerOn",true);
                        if(TcpSocket.tcpState==="connected")
                            TcpSocket.sendData(tname+"_speed_01#!");
                        else
                            Controler.send(tname+"_speed_01");
                    }
                    else{
                        fanStateModel.setProperty(index,"powerOn",false);
                        if(TcpSocket.tcpState==="connected")
                            TcpSocket.sendData(tname+"_close#!")
                        else
                            Controler.send(tname+"_close");
                    }
                }

                style:SwitchStyle{
                    groove: Image {
                        source:control.checked?"qrc:/imgs/control/smartHomeIcons/control/switcher_on.png":
                                                "qrc:/imgs/control/smartHomeIcons/control/switcher_off.png"
                    }
                    handle: Image{
                        source:"qrc:/imgs/control/smartHomeIcons/control/switcher_drigger.png"
                    }
                }
            }

            //line
            Image {
                id: line
                source: "qrc:/imgs/control/smartHomeIcons/control/icon_line.png"
                anchors.bottom: parent.bottom
                width: parent.width
            }

        }
    }

    //init timer
    Timer{
        id:initTimer
        interval: 100
        property var counter:1
        running: counter<=4
        repeat: true
        onTriggered: {
            fanStateModel.append({
                                     "name":"fan"+counter,
                                     "powerOn":counter%2===0?true:false,
                                     "level":1,
                                     "tname":"ceiling_fan_0"+counter
                                 })
            counter++;
        }
    }
}
